<template>
	<view class="container">
		<scroll-view scroll-with-animation scroll-y :scroll-top="primaryScrollTop" class="cate-side-left">
			<view v-for="(item,index) in categoryData" :key="index" class="item-box" :class="currentIndex===index?'active':''" @tap="selectClassTap(index)">
				<text class="text">{{item.title}}</text>
			</view>
		</scroll-view>
		
		<scroll-view scroll-with-animation scroll-y class="cate-side-right" :scroll-top="scrollTop" @scroll="rightScroll">
			<view class="cate-box" v-for="(sitem,i) in categoryData" :key="i">
				<!--view class="floor-box">
					<image mode="widthFix" src="https://dsfs.oppo.com/archives/202103/20210301100302603c51325d8a7.png?_w_=738&_h_=240"></image>
				</view-->
				<view class="stitle">
					<text class="title">{{sitem.title}}</text>
				</view>
				<view class="citem-list">
					<navigator class="list-box" 
						v-for="(item,index) in sitem.children" 
						:key="index"
						:url="'list?cid='+item.id">
						<view class="img-box">
							<image mode="widthFix" :src="$api.loadFile(item.imgUrl)"></image>
						</view>
						<text class="title">{{item.title}}</text>
					</navigator>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoadingShow:true,
				categoryData:[], //类别树数据
				currentIndex:0,
				scrollTop:0,
				leftScrollTop:[],	//左侧每一个分类项目距离顶部的高度
				rightScrollTop:[],	//右侧每一个分类项目距离顶部的高度
				leftClassItemHeight:0,	//左侧一个分类项目的高
				primaryScrollTop:0,	//左侧分类项目距离顶部的距离
			};
		},
		methods: {
			//初始化数量
			async loadData(){
				let _this = this;
				await _this.$api.request({
					url: `/client/shop/category?siteId=${_this.$site}`,
					method: "GET",
					load: true
				}).then(res=>{
					_this.categoryData = res.data;
				});
				//返回一个SelectorQuery对象实例。
				//可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。
				let query = uni.createSelectorQuery();
				_this.$nextTick(()=>{
					//遍历左侧每一个分类项目距离顶部的高度
					query.selectAll('.item-box').boundingClientRect(data=>{
						_this.leftScrollTop = data.map(item=>item.top)
						//console.log(this.leftScrollTop);
					}).exec(()=>{
						_this.leftClassItemHeight = _this.leftScrollTop[1] - _this.leftScrollTop[0]
					});
					//遍历右侧每一个分类项目距离顶部的高度
					query.selectAll('.cate-box').boundingClientRect(data=>{
						_this.rightScrollTop = data.map((item,index,array)=>{
							return item.top
						})
					}).exec(()=>{
						//console.log(this.rightScrollTop)
					});
				});
			},
			//左侧一级分类列表的触碰事件
			selectClassTap(index){
				this.currentIndex = index;
				this.scrollTop = this.rightScrollTop[this.currentIndex]
			},
			//右侧二级分类列表的滚动事件
			rightScroll(event){
				this.rightScrollTop.forEach((item,index)=>{
					if(item<=event.detail.scrollTop){
						this.currentIndex = index
					}
				})
			}
		},
		onLoad(){
			this.loadData();
		},
		watch:{
			//当currentIndex值发生变化时触发函数
			currentIndex(newValue,oldValue){
				//判断左侧是否需要滚动
				let query = uni.createSelectorQuery();
				query.select('.cate-side-left').fields({
					size:true,	//是否返回节点尺寸（width height）
					scrollOffset:true	//是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
				},res=>{
					//console.log(res.height,res.scrollTop)
					let H = res.height;	//设备的可用高度（设备高度-导航条高度-tab栏高度）
					//左侧第n个分类项目距离顶部的高度+左侧一个分类项目的高度 > 设备可用高度+左侧分类项目滚动的距离
					if(this.leftScrollTop[newValue] + this.leftClassItemHeight > H + res.scrollTop){
						//console.log('需要左侧向下滚动')
						let itemIndex=newValue
						if(newValue<this.leftScrollTop.length-1){
							itemIndex++
						}
						this.primaryScrollTop = this.leftScrollTop[itemIndex] + this.leftClassItemHeight - H;
					}
					//如果左侧分类项目滚动的距离 > 新变化的下标的左侧分类项目距离顶部的距离
					if(res.scrollTop > this.leftScrollTop[newValue-1]){
						this.primaryScrollTop = this.leftScrollTop[newValue-1]
					}
				}).exec();
			}
		},
		
	}
</script>

<style lang="scss">
	.cate-side-left{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 180rpx;
		background: #fff;
		.item-box{
			position: relative;
			line-height: 96rpx;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			&.active{
				color: #f63434;
				font-weight: bold;
				background: #f5f5f5;
				.text::before{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 0;
					margin-top: -14rpx;
					width: 6rpx;
					border-radius: 0 12rpx 12rpx 0;
					height: 28rpx;
					background: #f63434;
				}
				/*&::before{
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 10rpx;
					background: #fff;
					border-radius: 0 0 20rpx 0;
					overflow: hidden;
				}
				&::after{
					content: "";
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 10rpx;
					background: #fff;
					border-radius: 0 20rpx 0 0;
					overflow: hidden;
				}*/
			}
			.text{
				padding: 0 16rpx;
				color: rgba($color: #000, $alpha: 0.6);
				font-size: 28rpx;
			}
		}
	}
	.cate-side-right{
		position: absolute;
		top: 0;
		left: 180rpx;
		right: 0;
		bottom: 0;
		width: 570rpx;
		.cate-box{
			position: relative;
			padding: 24rpx 24rpx 0 24rpx;
			.stitle{
				margin-bottom: 32rpx;
			}
			.citem-list{
				display: flex;
				justify-content: flex-start;
				flex-flow: row wrap;
				margin-left: -20rpx;
				overflow: hidden;
				.list-box{
					margin: 0 0 20rpx 20rpx;
					padding: 12rpx;
					box-sizing: border-box;
					width: 160rpx;
					height: 202rpx;
					border-radius: 12rpx;
					background: #fff;
					overflow: hidden;
					.img-box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 136rpx;
						height: 136rpx;
						image{
							width: 100%;
						}
					}
					.title{
						display: block;
						margin-top: 12rpx;
						padding-bottom: 12rpx;
						color: #333;
						font-size: 24rpx;
						text-align: center;
						line-height: 30rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>